<template>
    <nav class="sub-tab">
      <ul>
        <li>北京</li>
        <router-link
          v-for="{label,to,name} in subTabs"
          :key="to"
          :to="name"
          tag="li"
          active-class="active"
        >{{label}}</router-link>
        <li>搜索</li>
      </ul>
    </nav>
</template>

<script>
import subTabs from "../assets/jsons/subTabs.json";
export default {
  components: {},
  props: {},
  data() {
    return {
      subTabs
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.sub-tab {
  ul {
    display: flex;
    line-height: 200%;
    vertical-align: middle;
    background-color: #fff;
    li {
      &:first-child,
      &:last-child {
        flex: 0;
        flex-basis: auto;
      }
      &.active {
        color: red;
      }
      flex: 1;
      min-width: 0px;
      text-align: center;
    }
  }
}
</style>